<template>
	<view class="login">
		<u-navbar :titleStyle="{fontWeight:'bold'}" bgColor="transparent" title="　" />
		<view class="login-card">
			<view class="login-info">
				<view class="info-foundation">
					<view class="info-avatar">
						<u-avatar shape="square"
							:src="shop_data.logo" size="70">
						</u-avatar>
					</view>
					<view class="info-text u-line-1">{{shop_data.title}}</view>
				</view>
				<view class="info-tips">尽享海量优质好物</view>
				<button class="info-button cu-btn" @click="numberChang">手机号授权登录</button>
				<view class="info-term">
					<view class="term-left">
						<u-checkbox-group size="23">
							<u-checkbox @click="oneCheck=!oneCheck" :checked="oneCheck" labelColor="rgb(151,151,151)" label="我已阅读并同意"
								:customStyle="{marginBottom: '8px'}" shape="circle" activeColor="#FFCF4F" />
						</u-checkbox-group>
					</view>
					<view class="term-link" @click="multiRedirect('/subpkg/agreement/agreement?name=' + '用户协议' + '&type=' + 'fw')">《用户协议》</view>
				</view>
			</view>
		</view>
		<u-popu  ref="popup" @close="login_popup=false" mode="center" border-radius="20" width="100%" >
			<view class="login-popup">
				<view class="popup-card">
					<view class="popup-tips">注册/登录将会获取您的手机号,<br>用途:</view>
					<view class="popup-useto">
						<view class="useto-item">订单有问题时卖家联系您</view>
						<view class="useto-item show">使用手机号登录</view>
					</view>
					<view class="popup-notice">
	<!-- 					<view class="notice-icon">
							<u-icon name="lock" color="rgb(153,153,153)" size="30"></u-icon>
						</view> -->
						<view class="notice-text">提示：官方将竭力保护您的信息隐私安全！<br>点击查看<b class="notice-link" @click="multiRedirect('/subpkg/agreement/agreement?name=' + '隐私政策' + '&type=' + 'ysxy')">《隐私政策》</b></view>
					</view>
					<view class="popup-operate">
						<button class="operate-button cu-btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">同意获取手机号并登录</button>
					</view>
					<view class="popup-close" @click="$refs.popup.close()">
						<u-icon name="close-circle" color="#FFCF4F" size="25"></u-icon>
					</view>
				</view>
			</view>
		</u-popu>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login_popup:true,
				oneCheck:false
			};
		},
		methods:{
			numberChang(){
				if(!this.oneCheck){
					this.$u.toast('请先同意用户协议')
					return
				}
				this.$refs.popup.open()
			},
			getphonenumber(e) {
				let {
					code,
					encryptedData,
					iv
				} = e.detail
				if (!iv) {
					this.$u.toast('获取信息失败')
					setTimeout(()=>{
						uni.navigateBack()
					},800)
					return
				}
				uni.login({
					success: (res) => {
						this.$u.vuex('use_switch',false)
						this.showLoding()
						this.$network('/api/index/wxCodeLogin', {
							code: res.code,
							phone_code: code,
							pid:this.share_id
						}).then(res => {
							this.$u.vuex('card_show',true)
							this.$store.commit('handleLogin',res.data)
							this.showhideloding()
							uni.showToast({
								title: '登录成功',
								mask: true,
								icon: "success"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 700)
						})
					},
					fail: (err) => {}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {}
	.login-popup{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.popup-card{
			width: 85%;
			padding: 25px 20px;
			background: #FFF;
			border-radius: 20rpx;
			position: relative;
			.popup-close{
				position: absolute;
				top: 10px;
				right: 10px;
			}
			.popup-operate{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.operate-button{
					width: 400rpx;
					height: 90rpx;
					background-color: #FFCF4F;
					color: #333;
					padding: 0 20rpx;
					margin: 0;
					border-radius: 24px;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;
									box-shadow: rgba(76, 153, 64, 0.3) 0px 7px 29px 0px;
				}
			}
			.popup-tips{
				line-height:25px;
				font-size: 30rpx;
				color: #000;
				text-align: center;
				font-weight: bold;
			}
			.popup-notice{

				.notice-icon{
					margin-right:5rpx;
					    position: relative;
					    top: -4rpx;
				}
				.notice-text{
					line-height: 25px;
					font-size: 28rpx;
					color: #999999;
					flex: 1;
					text-align: center;
					.notice-link{
						display: inline-block;
						color: #FFCF4F;
					}
				}
			}
			.popup-useto{
				background: rgb(247,247,247);
				padding: 10px 5px;
				border-radius: 5px;
				margin: 30rpx 0;
				.useto-item{
					font-size: 28rpx;
					color: rgb(102,102,102);
					padding-left:30rpx;
					position: relative;
					&.show{
						margin-top: 25rpx;
					}
				}
				.useto-item::after{
					content: "";
					position: absolute;
					left:2px;
					top: 8px;
					width: 5px;
					height: 5px;
					border-radius: 50%;
					background: rgb(102,102,102);
				}
			}
		}
	}
	.login-card {
		padding-top: 80px;
		display: flex;
		align-items: center;
		justify-content: center;

		.login-info {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.info-foundation {
				display: flex;
				align-items: center;

				.info-avatar {
					margin-right: 30rpx;
				}

				.info-text {
					max-width: 400rpx;
					font-size: 70rpx;
					color: #000;
					font-family: "SimHei";
				}
			}

			.info-term {
				margin: 50rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.term-link {
					font-size: 28rpx;
					color: #FFCF4F;
					position: relative;
					top: -5rpx;
				}
			}

			.info-button {
				box-shadow: rgba(76, 153, 64, 0.3) 0px 7px 29px 0px;
				width: 500rpx;
				height: 90rpx;
				border-radius: 24px;
				background-color: #FFCF4F;
				color: #333;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 15rpx;
				margin: 50rpx 0 0;
			}

			.info-tips {
				margin-top: 50rpx;
				letter-spacing: 2px;
				font-size: 40rpx;
				color: #000;
				text-align: center;
				font-family: "SimHei";
			}
		}
	}
</style>
